<template>
  <el-row>
    <el-col :xs="1" :sm="2" :md="3" :lg="4" :xl="2" class="forumCol">
    </el-col>
    <el-col :xs="22" :sm="20" :md="18" :lg="16" :xl="20" class="forumCol">
      <el-page-header title="回退" @back="back" class="post">
        <template #content>
          <span class="postHead"> {{ postDetail.title }} </span>
        </template>
        <div class="postBody">
          <div class="postUserInf" style="display: flex; flex-direction: row;align-items: center;"> 
            <div style=" margin: 5px 0 5px 0; border-radius: 32.5px;" >
              <el-avatar :size="65" :src="'/prod-api'+user.avatar" style="font-size: 20px; border: 1px solid rgb(64, 158, 255);"></el-avatar>
            </div>
            <p style=" margin: 0 0 0 15px;color: rgb(51, 126, 204);font-weight: 600;"><span style="color: rgb(31, 31, 31);font-weight: 500;">作者：</span>{{ user.nickName }}</p>
            <p style=" margin: 0 0 0 15px;color: rgb(51, 126, 204);font-weight: 600;"><span style="color: rgb(31, 31, 31);font-weight: 500;">来自学校：</span>{{ getSchoolNameById(user.schoolId) }}</p>
            <p style=" margin: 0 0 0 15px;color: rgb(51, 126, 204);font-weight: 600;"><span style="color: rgb(31, 31, 31);font-weight: 500;">专业：</span>{{ getSpecialtyNameById(user.specialtyId) }}</p>
            <p style=" margin: 0 0 0 15px;"><span style="">发布时间：</span>{{ parseTimeString(postDetail.createTime) }}</p>
          </div>
          <div  v-html="postDetail.content"></div>
          <div class="postCase" >
            <div class="star" > <!-- 收藏数 -->
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="isCollect?'取消收藏':'点击收藏'"
                placement="bottom"
              >
                <el-icon :color="isCollect?'rgb(235, 243, 0)':'rgb(103, 105, 109)'" size="16" @click="putCollect()"><Star /></el-icon>
              </el-tooltip>
              <p style="margin: 0 0 0 3px;">{{ updateNumber(postDetail.collectNumber) }}</p>
            </div>
            <div class="upvote"> <!-- 点赞数 -->
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="isUpvote?'取消点赞':'点击点赞'"
                placement="bottom"
              >
                <el-icon :color="isUpvote?'rgb(245, 45, 45)':'rgb(103, 105, 109)'" size="16" @click="putUpvote()"><IceTea /></el-icon>
              </el-tooltip>
              <p style="margin: 0 0 0 3px;">{{ updateNumber(postDetail.upvoteNumber) }}</p>
            </div>
            <div class="review"> <!-- 评论数 -->
              <el-icon color="rgb(103, 105, 109)" size="16"><ChatDotRound /></el-icon>
              <p style="margin: 0 0 0 3px;">{{ updateNumber(postDetail.reviewNumber) }}</p>
            </div>
          </div>
        </div>
        <el-card class="review" style="" shadow="never">
          <ForumReview @updatePost="addReviewMethod" :postInf="postDetail" :isPostId="isPost" style="width: 100%;"></ForumReview>
        </el-card>
      </el-page-header>
    </el-col>
    <el-col :xs="1" :sm="2" :md="3" :lg="4" :xl="2" class="forumCol">
    </el-col>
  </el-row> 
</template>

<script>
import {getPost,updatePost} from "@/api/forum/post"
import {listPostCollect,addPostCollect,delPostCollectForUserPost} from "@/api/forum/postCollect"
import {listPostUpvote,addPostUpvote,delPostUpvoteForUserPost} from "@/api/forum/postUpvote"
import {getStudent} from "@/api/forum/student"
import ForumReview from "@/views/review/ForumReview.vue"
import ReviewDemo from "@/components/Review/ReviewDemo.vue"
import usePostStore from "@/store/forum/post"
import useBaseStore from "@/store/forum/base"
import { ElNotification } from 'element-plus'
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import useUserStore from '@/store/modules/user'
import { parseTime } from '@/utils/ruoyi'

export default {
  name: "postDetail",
  data(){
      return {
        postDetail:{},
        user:{},
        isCollect: false,
        isUpvote: false,
        isPost: false,
        isLoading: false,
      }
  },
  components:{
    ForumReview,
    ReviewDemo
  },
  created(){
    this.$route.params.postId;
    if(this.$route.params.postId!=null){
      this.getPostDetail();
    }else{
      this.$router.push("/")
    }
  },
  methods:{
    parseTimeString(date) {
        return parseTime(new Date(date));
    },
    getSchoolNameById(schoolId){
      var school = useBaseStore().getSchoolForId(schoolId);
      return school!=null?school.name:'';
    },
    getSpecialtyNameById(specialtyId){
      var specialty = useBaseStore().getSpecialtyForId(specialtyId);
      return specialty!=null?specialty.name:'';
    },
    getStudentInf(id){
      getStudent(id).then(res=>{
        this.user = res.data;
        console.log(this.user);
      })
    },
    //收藏和取消收藏
    putCollect(){
      this.loading = true;
      if(!this.isCollect){
        var data = {
          id: this.postDetail.id,
          collectNumber: this.postDetail.collectNumber+1
        }
        updatePost(data).then(res=>{
          this.isCollect = true;
          var addPostCollectData = {
            userId: useUserStore().id,
            postId: this.postDetail.id
          }
          addPostCollect(addPostCollectData).then(res=>{
            if(res.code==200){
              ElNotification({
                message: '收藏成功。',
                type: 'success',
              })
              this.getPostDetail();
            }
            this.isLoading = false;
          })
        });
      }else{
        var data = {
          id: this.postDetail.id,
          collectNumber: this.postDetail.collectNumber-1
        }
        updatePost(data).then(res=>{
          this.isCollect = false;
          var delPostCollectData = {
            userId: useUserStore().id,
            postId: this.postDetail.id
          }
          delPostCollectForUserPost(delPostCollectData).then(res=>{
            if(res.code==200){
              ElNotification({
                message: '取消收藏成功。',
                type: 'success',
              })
              this.getPostDetail();
            }
            this.isLoading = false;
          })
        });
      }
    },
    //点赞和取消点赞
    putUpvote(){
      if(!this.isUpvote){
        var data = {
          id: this.postDetail.id,
          upvoteNumber: this.postDetail.upvoteNumber+1
        }
        updatePost(data).then(res=>{
          var addPostUpvoteData = {
            userId: useUserStore().id,
            postId: this.postDetail.id
          }
          addPostUpvote(addPostUpvoteData).then(res=>{
            if(res.code==200){
              ElNotification({
                message: '点赞成功。',
                type: 'success',
              })
              this.isUpvote = true;
              this.getPostDetail();
            }
            this.isLoading = false;
          })
        });
      }else{
        var data = {
          id: this.postDetail.id,
          upvoteNumber: this.postDetail.upvoteNumber-1
        }
        updatePost(data).then(res=>{
          var delPostUpvoteData = {
            userId: useUserStore().id,
            postId: this.postDetail.id
          }
          delPostUpvoteForUserPost(delPostUpvoteData).then(res=>{
            if(res.code==200){
              ElNotification({
                message: '取消点赞成功。',
                type: 'success',
              })
              this.isUpvote = false;
              this.getPostDetail();
            }
            this.isLoading = false;
          })
        });
      }
    },
    updateNumber(number){
      return usePostStore().normalizeNumber(number);
    },
    back(){
      this.$router.go(-1)
    },
    getPostDetail() {
      getPost(this.$route.params.postId).then(res=>{
        // 请求
        // console.log("帖子详情",res);
        if(res.code==200){
          this.postDetail = res.data;
          this.getStudentInf(this.postDetail.userId);
          console.log("可以开始初加载评论。")
          this.isPost = true;
          this.postIsCollect(this.$route.params.postId);
          this.postIsUpvote(this.$route.params.postId);
        }else if(res.code==404){
          console.log("404",res);
          this.$router.push("/404");
        }
      })
    },
    //帖子是否被观看用户收藏
    postIsCollect(postId){
      var query = {
          userId: useUserStore().id,
          postId: postId
        }
      listPostCollect(query).then(res=>{
        if(res.rows.length>0){
          this.isCollect = true;
        }
      })
    },
    //帖子是否被观看用户点赞
    postIsUpvote(postId){
      var query = {
          userId: useUserStore().id,
          postId: postId
        }
      listPostUpvote(query).then(res=>{
        if(res.rows.length>0){
          this.isUpvote = true;
        }
      })
    },
    addReviewMethod(){
      this.getPostDetail();
    }
  }
}
</script>

<style lang="scss">
.post{
  .postBody{
    .postUserInf{
      img{
        width: 100%;
      }
    }
    img{
      width: 50%;
      // min-width: 500px;
      margin: 20px 2px 20px 2px;
    }
  }
}
.editor-img-uploader {
  display: none;
}
.editor, .ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;
}
.quill-img {
  display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>

<style scoped lang="scss">
.post{
  margin: 20px 20px 10px 20px;
  font-weight: bold;
  .postHead{
    font-size: 20px;
  }
  .postBody{
    margin: 40px 30px 40px 30px;
    font-weight: 500;
    
    .postCase {
      display: flex;
      flex-direction: row;
      font-size: 15px;
      line-height: 16px;
      div{
        margin: 15px 0 0 10px;
      }
      .star{
        display: flex;
        flex-direction: row;
      }
      .upvote{
        display: flex;
        flex-direction: row;
      }
      .review{
        display: flex;
        flex-direction: row;
      }
    }
  }
  .review{
    display: flex;
    flex-grow: 1;
  }
}
</style>